<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<html>
	<%@include file="/common/simpleFrame.jsp"%>
	<!-- 顶部标题 -->
	<div id="personalHeader">
		<div id="personalBlogTitle">
			${blogTitle}
		</div>
		<div id="personalBlogTopFn">
			<a href="#" id="pManageBtn">管理我的博客</a>
			<a href="#" id="toWriteArticle">发新文章</a>
		</div>
	</div>

	<!-- 右侧数据区 -->
	<div id="articleList">
		<!-- 精彩博客 -->
		<div id="perfectArticles">
			精彩博客
			<br />
			<a id="articleTitle" href="#">我的青春誰做主？</a>
		</div>
		<img id="personalHLine1" src="../images/u84.png" />
		<!-- 我的博客 -->
		<div id="myArticles">
			我的博客
		</div>
	</div>
	<!-- 编辑文章 -->
	<%@include file="articleEditor.jsp"%>
	<!-- 阅读文章 -->
	<%@include file="readArticle.jsp"%>
	<!-- 个人Blog管理 -->
	<%@include file="blogManage.jsp"%>

	<!-- 用户信息 -->
	<div id="userInfoArea">
		<%@include file="/common/userInfo.jsp"%>
	</div>

	<div id="leftDataArea1">
		<input type="text" style="width: 130px;"></input>
		<button>搜索本博</button>
	</div>
	<div id="leftDataArea2">
		最新访客
	</div>
	<div id="leftDataArea3">
		最新评论
	</div>
	<div id="leftDataArea4">
		最新留言
	</div>
	<div id="leftDataArea5">
		我的关注
	</div>
	<div id="leftDataArea6">
		我的收藏
	</div>

	<!-- 垂直分割线 -->
	<img id="personalVLine1" src="../images/u81.png" />

	<link href="../css/personalMain.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript">
		$(document).ready(function(){
			$('#toWriteArticle').click(function(){
				$("#articleContent").hide();
				$("#articleList").hide();
				$("#blogManage").hide();
				$("#articleEditor").show();
			});
			var returnToList=function(){
				$("#articleEditor").hide();
				$("#articleContent").hide();
				$("#blogManage").hide();
				$("#articleList").show();
			};
			$("a[id$=Back]").each(function(){
				$(this).click(returnToList)
			});
			$('#articleTitle').click(function(){
				$("#articleList").hide();
				$("#articleEditor").hide();
				$("#blogManage").hide();
				$("#articleContent").show();
			});
			$('#pManageBtn').click(function(){
				$("#articleEditor").hide();
				$("#articleContent").hide();
				$("#articleList").hide();
				$("#blogManage").show();
			});
		})
	</script>
</html>
